<%@page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        var deviceName="";
        var currentNo=1;
        //执行查询信息的函数
        function query(deviceName,currentNo){
            var myajax= $.ajax({
                "url":"${pageContext.request.contextPath}/queryAllDevices",
                "type":"post",
                "data":{"deviceName":deviceName,"currentNo":currentNo},
                "dataType":"json",
                "success":function(result){
                    $(".message").remove();
                    for(var i=0;i<result.length-1;i++){
                        var state;
                        if(result[i].usage==0){
                            state="正常";
                        }else{
                            state="不正常";
                        }
                        var str=" <tr class=\"message\">\n" +
                            "                    <td>"+result[i].id+"</td>\n" +
                            "                    <td><a href='/queryDevice/"+result[i].id+"'>"+result[i].deviceName+"</a></td>\n" +
                            "                    <td>"+result[i].deviceModel+"</td>\n" +
                            "                    <td>"+result[i].assetCode+"</td>\n" +
                            "                    <td>"+result[i].purchaseTime+"</td>\n" +
                            "                    <td>"+state+"</td>\n" +
                            "                    <td>"+result[i].devicePrice+"</td>\n" +
                            "                </tr>";
                        $(".show").append(str);
                    }
                    var str1="<a href='javascript:;' class='page' value='1' >首页</a>\n" +
                        "                <a href='javascript:;' class='page' value='"+(result[result.length-1].currentNo-1)+"'>上一页</a>\n" +
                        "                <a href='javascript:;' class='page' value='"+(result[result.length-1].currentNo+1)+"'>下一页</a>\n" +
                        "                <a href='javascript:;' class='page' value='"+(result[result.length-1].total)+"'>尾页</a>\n" +
                        "                <span>第"+result[result.length-1].currentNo+"页/共"+result[result.length-1].total+"页</span>";
                    $("#pageMessage p").html(str1);

                }
            })

            $.when(myajax).done(function(){
                // 隔行换色
                $(".message:odd").css("background","#FFACC9");
                $(".page").click(function(){
                    deviceName=$(".deviceName").val();
                    currentNo=$(this).attr("value");
                    query(deviceName,currentNo);
                })
            })
        }

        $(function(){
            //第一次加载页面查询所有的设备信息
            query(deviceName,currentNo);

            //点击搜索信息执行的事件
            $("#ss").click(function(){
                deviceName=$(".deviceName").val();
                query(deviceName,currentNo);
            })



        })
    </script>
</head>
<style type="text/css">
    #bd{
        width: 800px;
        margin: 0px auto;
    }
    #search {
        width: 50%;
        margin: 15px auto;
    }
    .show{
        width: 100%;
        margin: 30px auto 0px;
    }

    .title{
        background-color: #23B14D;
    }
    .message {
        text-align: center;
    }
    #pageMessage{
        width: 50%;
        margin: 15px auto;
    }
    #pageMessage span{
        margin-left: 50px;
    }
</style>
<body>
    <div id="bd">
        <div id="search">
            <p>设备名称:<input type="text" class="deviceName"/> <button id="ss">查询</button> </p>
        </div>
        <div id="context">
            <table border="all" class="show">
                <tr class="title">
                    <th>设备编号</th>
                    <th>设备名称</th>
                    <th>设备型号</th>
                    <th>资产编码</th>
                    <th>购买时间</th>
                    <th>设备转态</th>
                    <th>设备价值</th>
                </tr>
            </table>
        </div>

        <div id="pageMessage">
            <p>

            </p>
        </div>
    </div>
</body>
</html>
